<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3.类的内部工作机制就是原型操作</title>
</head>

<body>
  <script>
    //类其实是函数
    class User {
      constructor(name) {
        //对象的属性是独有的
        this.name = name;
      }
      show () {
        // 方法放入原型中，可以共用
        console.log(this.name);
      }
    }
    console.log(typeof User); //function

    //constructor 用于定义函数代码，下面是与普通函数的对比，结构是一致的
    let user = new User('lhq');
    console.dir(User);
    console.log(User == User.prototype.constructor); //true
    // 实例化的对象只有name 属性
    console.log(Object.getOwnPropertyNames(user)); //'name']
    //在类中定义的方法也保存在函数原型中
    console.log(Object.getOwnPropertyNames(User.prototype)); //["constructor", "show"]
    //下面是对比的普通函数
    function Hd (name) {
      // 对象的属性是独有的
      this.name = name;
    }
    // 对象的方法放入原型中，可以共用
    Hd.prototype.show = function () {
      console.log(this.name);
    };
    let hd = new Hd('hdcms');
    console.dir(Hd);
    console.log(Hd == Hd.prototype.constructor); //true
    // 实例化的对象只有name 属性    
    console.log(Object.getOwnPropertyNames(hd)); //'name']
    console.log(Object.getOwnPropertyNames(Hd.prototype)); //["constructor", "show"]

    //在类中定义的方法也保存在函数原型中

    

    //  所以上面两种分别通过class 和 函数 声明的类是一致的
  </script>
</body>

</html>